    body {
        background-color: black;
        background-size: 100%;
        margin: 0;
        padding: 0;
        overflow-y: hidden;
        color: #fff;
    }
    
    .daohang {
        background-color: #f2b1b0;
        width: 80px;
        height: 230px;
        position: fixed;
        left: 30px;
        top: 300px;
        border-radius: 10px;
        opacity: 0.2;
        filter: alpha(opacity=20);
    }
    
    .daohang:hover {
        opacity: 1.0;
        filter: alpha(opacity=100);
    }
    
    .kaitoudonghua {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        ;
    }
    
    audio {
        position: absolute;
        top: 30px;
    }
    
    #text {
        position: relative;
        color: white;
        font-size: 5em;
        font-weight: 700;
        outline: none;
        text-align: center;
        text-shadow: 1px 1px 0px #da898b;
    }
    
    view {
        width: 1200px;
        height: 3900px;
        margin: 0px auto;
    }
    
    .maodian1 {
        display: inline-block;
        font: 35px "Berlin Sans FB";
        color: white;
        position: absolute;
        top: 160px;
        left: 150px;
        text-decoration: none;
        border: solid 2px;
        border-radius: 10px;
    }
    
    .maodian2 {
        display: inline-block;
        font: 35px "Berlin Sans FB";
        color: white;
        position: absolute;
        top: 260px;
        left: 150px;
        text-decoration: none;
        border: solid 2px;
        border-radius: 10px;
    }
    
    .maodian3 {
        display: inline-block;
        font: 35px "Berlin Sans FB";
        color: white;
        position: absolute;
        top: 360px;
        left: 150px;
        text-decoration: none;
        border: solid 2px;
        border-radius: 10px;
    }
    
    .maodian4 {
        display: inline-block;
        font: 35px "Berlin Sans FB";
        color: white;
        position: absolute;
        top: 460px;
        left: 150px;
        text-decoration: none;
        border: solid 2px;
        border-radius: 10px;
    }
    
    .shipina {
        font: 120px "幼圆";
        color: white;
        text-align: center;
        display: inline-block;
        position: absolute;
    }
    
    .a {
        font: 90px "Berlin Sans FB";
        position: absolute;
        top: 0px;
        left: 150px;
        text-decoration: none;
        display: inline-block;
        color: rgb(255, 255, 255);
    }
    
    .a0 {
        display: inline-block;
        font: 80px "Berlin Sans FB";
        color: white;
    }
    
    .a1 {
        position: absolute;
        left: 950px;
        top: 30px;
        display: inline-block;
        font: 40px "Berlin Sans FB";
        color: white;
    }
    
    .a2 {
        position: absolute;
        left: 850px;
        top: 155px;
        display: inline-block;
        font: 80px "Berlin Sans FB";
        color: white;
        transition: all 3s;
    }
    
    .a2:hover {
        transform: translate(-500px, 100px);
        transform: scale(4);
    }
    
    .a3 {
        position: absolute;
        left: 1050px;
        top: 205px;
        display: inline-block;
        font: 20px "Berlin Sans FB";
        color: white;
    }
    
    .a4 {
        position: absolute;
        left: 850px;
        top: 260px;
        display: inline-block;
        font: 25px "幼圆";
        color: white;
    }
    
    .a5 {
        text-align: center;
        display: inline-block;
        font: 25px "幼圆";
        color: white;
    }
    
    .op-section {
        margin: 0px auto;
        width: 1200px;
        position: relative;
    }
    
    .second {
        width: 1200px;
        position: relative;
        margin: 0px 0px 20px 100px;
    }
    
    .third {
        position: relative;
        top: 0px;
    }
    
    .fourth {
        width: 300px;
        position: relative;
        bottom: 240px;
        right: 460px;
    }
    
    .fifth {
        width: 1200px;
        height: 60px;
        position: relative;
        bottom: 50px;
    }
    
    .last {
        width: 90px;
        height: 150px;
        position: relative;
        right: 560px;
        top: 0px;
    }
    /* .one {
        width: 1200px;
        position: relative;
    }
    
    .two {
        width: 1200px;
        position: relative;
        margin: 0px 0px 20px 0px;
    }
    
    .three {
        position: relative;
    }
    
    .four {
        width: 300px;
        margin: 100px 0px;
    }
    
    .five {
        width: 1200px;
        height: 60px;
        margin: 200px auto;
        position: relative;
        background-image: url(40.jpg);
    }
    
    .six {
        width: 90px;
        height: 150px;
        background-color: #f2b0b1;
        position: fixed;
        left: 50px;
    } */
    
    .img1 {
        margin: 0px auto;
        width: 1200px;
        position: relative;
        top: -100px;
        left: 100px;
    }
    
    .img2 {
        margin: 0px auto;
        width: 800px;
        position: relative;
        right: 10px;
        bottom: 120px;
    }
    
    .img3 {
        width: 110px;
        display: inline-block;
        position: absolute;
        top: 30px;
        left: 830px;
        transition: all 3s;
    }
    
    img:hover {
        transform: rotate(360deg);
    }
    
    .img4 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px 0px 65px;
        border: white
    }
    
    .img5 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img6 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img7 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px 0px 145px;
    }
    
    .img8 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 16px 0px 35px;
    }
    
    .img9 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 16px;
    }
    
    .img10 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 16px 0px 80px;
    }
    
    .img11 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px 0px 35px;
    }
    
    .img12 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 10px;
    }
    
    .img13 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img14 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img15 {
        height: 380px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img16 {
        height: 380px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img17 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px 0px 75px;
    }
    
    .img18 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img19 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img20 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px 0px 65px;
    }
    
    .img21 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img22 {
        height: 400px;
        display: inline-block;
        border-radius: 15px;
        margin: 0px 15px;
    }
    
    .img24 {
        width: 80px;
        height: 80px;
        display: inline-block;
        margin: 0px 30px 0px 350px;
    }
    
    .img25 {
        width: 80px;
        height: 80px;
        display: inline-block;
        margin: 0px 30px;
    }
    
    .img26 {
        width: 80px;
        height: 80px;
        display: inline-block;
        margin: 0px 30px;
    }
    
    .img27 {
        width: 80px;
        height: 80px;
        display: inline-block;
        margin: 0px 30px;
    }
    
    .img28 {
        width: 70px;
        height: 70px;
    }
    
    .img29 {
        width: 70px;
        height: 70px;
    }
    
    .img30 {
        height: 560px;
        display: inline-block;
        margin: 0px 300px 0px 200px;
    }
    
    .img31 {
        height: 560px;
        display: inline-block;
        margin: 0px 400px 0px 160px;
    }
    
    .img32 {
        height: 560px;
        display: inline-block;
        margin: 0px 300px 0px 20px;
    }
    
    .img33 {
        height: 560px;
        display: inline-block;
        margin: 0px 300px 0px 100px;
    }
    
    .img34 {
        height: 560px;
        display: inline-block;
        margin: 0px 300px 0px 130px;
    }
    
    .img35 {
        height: 560px;
        display: inline-block;
        margin: 0px 300px 0px 130px;
    }
    
    .img36 {
        height: 560px;
        display: inline-block;
        margin: 0px 300px 0px 100px;
    }
    
    .img37 {
        height: 72px;
    }
    
    .box1 {
        width: 350px;
        height: 5px;
        background-color: white;
        position: absolute;
        top: 155px;
        left: 850px;
    }
    /*     
    .box2 {
        width: 1200px;
        height: 5px;
        background-color: white;
    } */
    
    .box3 {
        margin: 60px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1200px;
    }
    
    .box4 {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1200px;
    }
    
    .box5 {
        display: inline-block;
        background-color: #f2b1b0;
        width: 1200px;
        height: 80px;
        position: relative;
    }
    
    .box5 li {
        display: inline-block;
    }
    
    .box3 li {
        display: inline-block;
    }
    
    .box4 li {
        display: inline-block;
    }
    
    .swiper {
        position: relative;
        bottom: 50px;
        width: 1200px;
        height: 600px;
        overflow: hidden;
    }
    
    .swiper1 {
        position: relative;
        bottom: 100px;
        width: 1200px;
        height: 900px;
        overflow: hidden;
    }
    
    input {
        display: none;
    }
    
    .box3 label {
        position: absolute;
        bottom: 30px;
        width: 20px;
        height: 20px;
        border: 3px solid #fff;
        border-radius: 50%;
        background-color: #fff;
        z-index: 1;
    }
    
    .box4 label {
        position: absolute;
        bottom: 30px;
        width: 20px;
        height: 20px;
        border: 3px solid #fff;
        border-radius: 50%;
        background-color: #f5bebe;
        z-index: 1;
    }
    
    label[for="btn1"] {
        left: 30%;
    }
    
    label[for="btn2"] {
        left: 36%;
    }
    
    label[for="btn3"] {
        left: 42%;
    }
    
    label[for="btn4"] {
        left: 48%;
    }
    
    label[for="btn5"] {
        left: 54%;
    }
    
    label[for="btn6"] {
        left: 60%;
    }
    
    label[for="btn7"] {
        left: 66%;
    }
    
    label[for="btn9"] {
        left: 35%;
    }
    
    label[for="btn10"] {
        left: 40%;
    }
    
    label[for="btn11"] {
        left: 45%;
    }
    
    label[for="btn12"] {
        left: 50%;
    }
    
    label[for="btn13"] {
        left: 55%;
    }
    
    label[for="btn14"] {
        left: 60%;
    }
    
    label[for="btn15"] {
        left: 65%;
    }
    
    ul {
        display: flex;
        width: calc(1200px * 7);
        transition: all 0.5s;
    }
    
    li {
        list-style-type: none;
    }
    
    #btn1:checked~ul {
        margin-left: 0;
    }
    
    #btn2:checked~ul {
        margin-left: -1200px;
    }
    
    #btn3:checked~ul {
        margin-left: calc(-1200px * 2);
    }
    
    #btn4:checked~ul {
        margin-left: calc(-1200px * 3);
    }
    
    #btn5:checked~ul {
        margin-left: calc(-1200px * 4);
    }
    
    #btn6:checked~ul {
        margin-left: calc(-1200px * 5);
    }
    
    #btn7:checked~ul {
        margin-left: calc(-1200px * 6);
    }
    
    #btn9:checked~ul {
        margin-left: 0;
    }
    
    #btn10:checked~ul {
        margin-left: -1200px;
    }
    
    #btn11:checked~ul {
        margin-left: calc(-1200px * 2);
    }
    
    #btn12:checked~ul {
        margin-left: calc(-1200px * 3);
    }
    
    #btn13:checked~ul {
        margin-left: calc(-1200px * 4);
    }
    
    #btn14:checked~ul {
        margin-left: calc(-1200px * 5);
    }
    
    #btn15:checked~ul {
        margin-left: calc(-1200px * 6);
    }
    
    #btn1:checked~label[for="btn1"] {
        background-color: #f5bebe;
    }
    
    #btn2:checked~label[for="btn2"] {
        background-color: #f5bebe;
    }
    
    #btn3:checked~label[for="btn3"] {
        background-color: #f5bebe;
    }
    
    #btn4:checked~label[for="btn4"] {
        background-color: #f5bebe;
    }
    
    #btn5:checked~label[for="btn5"] {
        background-color: #f5bebe;
    }
    
    #btn6:checked~label[for="btn6"] {
        background-color: #f5bebe;
    }
    
    #btn7:checked~label[for="btn7"] {
        background-color: #f5bebe;
    }
    
    #btn9:checked~label[for="btn9"] {
        background-color: #b96565;
    }
    
    #btn10:checked~label[for="btn10"] {
        background-color: #b96565;
    }
    
    #btn11:checked~label[for="btn11"] {
        background-color: #ffffff;
    }
    
    #btn12:checked~label[for="btn12"] {
        background-color: #ffffff;
    }
    
    #btn13:checked~label[for="btn13"] {
        background-color: #b96565;
    }
    
    #btn14:checked~label[for="btn14"] {
        background-color: #ffffff;
    }
    
    #btn15:checked~label[for="btn15"] {
        background-color: #ffffff;
    }
    
    .videoone {
        width: 1200px;
        margin: 150px auto;
    }
    
    .div1 {
        width: 1200px;
        margin: 50px 0px;
        position: relative;
    }
    
    .div2 {
        width: 1200px;
        margin: 0px auto;
        margin: 30px 0px;
    }
    
    .div3 {
        width: 1200px;
        margin: 0px auto;
        margin: 30px 0px 50px;
    }
    
    .second span {
        position: relative;
        font: 4.8em "Berlin Sans FB";
        color: white;
        display: inline-block;
        text-transform: uppercase;
        animation: animate 2s ease-in-out 3;
        animation-delay: calc(0.1s * var(--i));
        animation-play-state: paused;
    }
    
    .third span {
        position: relative;
        bottom: 110px;
        font-size: 5em;
        color: white;
        display: inline-block;
        animation: animate 2s ease-in-out 3;
        animation-delay: calc(0.1s * var(--i));
        animation-play-state: paused;
        text-align: center;
    }
    
    .fourth span {
        position: relative;
        top: 0px;
        left: 520px;
        font-size: 2em;
        color: white;
        display: inline-block;
        animation: animate 2s ease-in-out 3;
        animation-delay: calc(0.1s * var(--i));
        animation-play-state: paused;
        text-align: center;
    }
    
    .fifth span {
        position: relative;
        top: 10px;
        left: 500px;
        font-size: 2em;
        color: white;
        display: inline-block;
        animation: animate 2s ease-in-out 3;
        animation-delay: calc(0.1s * var(--i));
        animation-play-state: paused;
        text-align: center;
    }
    
    .last span {
        width: 200px;
        position: relative;
        top: -40px;
        left: 500px;
        font-size: 1.5em;
        color: white;
        display: inline-block;
        animation: animate 2s ease-in-out 3;
        animation-delay: calc(0.1s * var(--i));
        animation-play-state: paused;
        text-align: center;
    }
    
    .second:hover span {
        animation-play-state: running;
    }
    
    .third:hover {
        animation-play-state: running;
    }
    
    .fourth:hover span {
        animation-play-state: running;
    }
    
    .fifth:hover span {
        animation-play-state: running;
    }
    
    @keyframes animate {
        0%,
        40%,
        100% {
            transform: translateY(0);
        }
        20% {
            transform: translateY(-50px);
        }
    }
    
    ol a {
        display: inline-block;
        position: absolute;
        right: 700px;
        top: 5150px;
        z-index: 1;
        text-decoration: none;
        font-size: 14px;
        color: rgb(255, 255, 255);
        display: inline-block;
    }
    
    ol a:hover {
        text-decoration: underline;
    }
    
    li {
        list-style-type: none;
    }
    
    s #radioWrap {
        width: 20px;
        height: 180px;
        position: absolute;
        right: 5%;
        top: 50%;
        margin-top: -90px;
    }
    
    #radio {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    /* #radio li {
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        text-indent: -10000px;
        border-radius: 50%;
        margin-top: 12px;
        cursor: pointer;
    } */
    
    .li1 {
        display: block;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        position: fixed;
        top: 280px;
        right: 20px;
    }
    
    .li2 {
        display: block;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        position: fixed;
        top: 310px;
        right: 20px;
    }
    
    .li3 {
        display: block;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        position: fixed;
        top: 340px;
        right: 20px;
    }
    
    .li4 {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        position: fixed;
        top: 370px;
        right: 20px;
    }
    
    .li5 {
        display: block;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        position: fixed;
        top: 400px;
        right: 20px;
    }
    
    .li6 {
        display: block;
        width: 20px;
        height: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        position: fixed;
        top: 430px;
        right: 20px;
    }
    
    #radio li:first-child {
        margin-top: 0;
    }
    
    #radioOn {
        width: 20px;
        height: 20px;
        margin-bottom: 12px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        border-radius: 50%;
    }